import React, {Component} from 'react';
import {Cascader, Drawer, Input, Tabs, Timeline} from 'antd';
import { DownOutlined } from '@ant-design/icons';

import styles from './styles.less';
const { TabPane } = Tabs;

const list = [
    {id:'1',bus1:'74A',bus2:'107',time:75.6,price:18.7},
    {id:'2',bus1:'75A',bus2:'107',time:78.6,price:18.7},
    {id:'3',bus1:'71B',bus2:'107',time:80,price:19.2},
    {id:'4',bus1:'102',bus2:'107',time:81,price:19.7},
    {id:'5',bus1:'71',bus2:'107',time:82.5,price:20},
]

export default class BusNav extends Component {
    state = {
        data:[],
        startLocationText:'新田圍 大圍',
        endLocationText:'香港仔/田灣邨'
    };
    static getDerivedStateFromProps(nextProps, prevState) {
        const { visible,data } = nextProps;
        console.log(data,"data");
        if (visible !== prevState.visible) {
            return {
                visible,
            };
        }
        if (data !== prevState.data) {
            return {
                data,
            };
        }
        return null;
    }

    onClose = () => {
        this.setState({
            visible: false,
        });
    };
    handleLocationTransform = ()=>{
        const {startLocationText,endLocationText} = this.state;
        this.setState({
            startLocationText: endLocationText,
            endLocationText: startLocationText,
        });
    }
    render() {
        const {visible,startLocationText,endLocationText} = this.state;
        const {onClose,handleBusNav} = this.props;
        return (
            <div className={styles.busNav}>
                <Drawer
                    title={<div style={{color:'#922943',fontSize:24,fontWeight:600}}>點對點</div>}
                    placement="left"
                    mask={false}
                    onClose={onClose}
                    visible={visible}
                    getContainer={false}
                    width={350}
                    style={{ position: 'absolute' }}
                    headerStyle={{ borderBottom: 'none'}}
                >
                    <div className={styles.searchInput}>
                        <div>
                            <Input placeholder="輸入 起點 或點擊地圖" value={startLocationText} bordered={false}  />
                            <Input placeholder="輸入 終點 或點擊地圖" value={endLocationText} bordered={false} />
                        </div>
                        <img className={styles.transform} onClick={()=>this.handleLocationTransform()} src={require('./image/p2pExchange.png')} alt=""/>
                    </div>
                    <Tabs defaultActiveKey="1" type="card">
                        <TabPane tab="以價錢排序" key="1">
                            <div className={styles.pricesort}>
                                <div className={styles.result}>較近車站搜尋結果</div>
                                <ul>
                                    {
                                        list.map(item=><li key={item.id} onClick={handleBusNav}>
                                            <span>{item.bus1}<span style={{color:'#bbb',marginLeft:5,marginRight:5}}>></span>{item.bus2}</span>
                                            <div>
                                                <div>{item.time} 分鐘</div>
                                                <div>$ {item.price}</div>
                                            </div>
                                        </li>)
                                    }
                                </ul>
                            </div>
                        </TabPane>
                        <TabPane tab="以車程排序" key="2">
                            <div className={styles.pricesort}>
                                <div className={styles.result}>較近車站搜尋結果</div>
                                <ul>
                                    {
                                        list.map(item=><li key={item.id} onClick={handleBusNav}>
                                            <span>{item.bus1}<span style={{color:'#bbb',marginLeft:5,marginRight:5}}>></span>{item.bus2}</span>
                                            <div>
                                                <div>{item.time} 分鐘</div>
                                                <div>$ {item.price}</div>
                                            </div>
                                        </li>)
                                    }
                                </ul>
                            </div>
                        </TabPane>
                    </Tabs>
                </Drawer>
            </div>
        );
    }
}
